<script setup>
import LeftComponents from "@/components/leftComponents.vue";
import {onMounted, ref, watch} from "vue";
import Http from "@/http/http.js";
import LeftTypeComponent from "@/views/webLayout/leftTypeComponent.vue";
import {useRouter} from "vue-router";
import ServiceBanner from "@/views/service/serviceBanner.vue";

const router = useRouter()
const typeData = ref([])
const listObj = ref({TypeId: 0})
const typeId = ref(0)

const formData = ref({})

onMounted((async () => {
  await getTypeData()
  await getParams()
}))

const getParams = () => {
  if (Object.keys(router.currentRoute.value.params).length > 0) {
    getListData(Number(router.currentRoute.value.params.id))
  }
}

const getTypeData = async () => {
  const res = await Http.serviceType()
  typeData.value = res.Data;
}
const getListData = async (professionId) => {
  if (professionId === 0) {
    return
  }
  const res = await Http.service({ServiceId: professionId})
  if (res.Data) {
    listObj.value = res.Data[0];
    if (listObj.value.TypeId) {
      const arr = listObj.value.TypeId.split(",")
      typeId.value = Number(arr[1])
    }
  }
}


watch(
    () => router.currentRoute.value.params,
    (value) => {
      if (value) {
        getListData(value)
      }
    },
    {
      deep: true
    }
);
</script>

<template>
  <service-banner/>
  <div class="wid flex justify-between">
    <div class="win_left">
      <div class="left_title">
        <div class="left_title_top"><b>服务项目</b> <span><icon-list color="blue"/></span></div>
        <div class="left_title_con">
          <left-type-component v-show="typeData.length>0" :type-data="typeData" :type-new-id="typeId" :type-router="'service'"/>
        </div>
      </div>
      <left-components/>
    </div>
    <div class="win_right">
      <div class="con">
        <div class="nr_top">
          <div class="">
            <h1>{{ listObj.ServiceTitle }}</h1>
            <p>
              {{ listObj.ServiceDes }}</p>
            <div class="">
              <img src="../../assets/phone.png" alt="">
              <span>400-999-8563</span>
            </div>
            <div class="m-t-30px">
              <a-button type="primary" size="large">
                <template #icon>
                  <img src="../../assets/zx.png" alt="">
                </template>
                立即咨询
              </a-button>
            </div>
          </div>
<!--          <div class="">
            <div class="">
              <h2>快速申请办理</h2>
              <a-form>
                <a-form-item label="称呼" required>
                  <a-input size="mini" v-model="formData.UserPhone" placeholder="手机号(必填)"/>
                </a-form-item>
                <a-form-item label="手机" required>
                  <a-input size="mini" v-model="formData.UserPhone" placeholder="手机号(必填)"/>
                </a-form-item>
                <a-form-item label="备注">
                  <a-textarea size="mini" v-model="formData.SoftNotice" placeholder="备注内容" allow-clear/>
                </a-form-item>
                <a-form-item>
                  <a-button size="mini" long>立即申请</a-button>
                </a-form-item>
              </a-form>
            </div>
          </div>-->
        </div>
        <div class="nr-title">
          <span>{{ listObj.ServiceTitle }}</span>
        </div>
        <div class="nr-con">
          <h2>{{ listObj.ServiceTitle }}</h2>
          <div class="" v-html="listObj.ServiceCon">
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
::v-global(.arco-form-item-label) {
  color: #fff !important;
  }
</style>
